<template>
  <div :class="$style.logoutmodal">
    <div :class="$style.logoutBtn" @click="loginOut">
      <img :class="$style.btnIcon" alt="" src="/tuichudenglubai.png" />
      <div :class="$style.btnText">退出登录</div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "LogoutModal",
  methods: {
    loginOut() {
      this.$layer.confirm('确认退出吗？', {
        title: '退出登录',
        btn: [{
          text: '确认',
          callback: (id) => {
            this.$layer.close(id);
            window.sessionStorage.removeItem("token");
            window.sessionStorage.removeItem("uKey");
            setTimeout(() => {
              window.location.reload();
            }, 100)
          }
        },
        {
          text: '取消',
          callback: (id) => {
            this.$layer.close(id);
          }
        }]
      })
    },
  },
});
</script>
<style module>
.logoutmodal {
  width: 100%;
  box-sizing: border-box;
  padding: 25px 0;
}

.logoutBtn {
  width: 385px;
  height: 42px;
  border-radius: 2px;
  background: #FF4D4F;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 auto;
}

.btnIcon {
  width: 16px;
  height: 16px;
}

.btnText {
  text-decoration: none;
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: normal;
  color: var(--color-white);
  margin-left: 10px;
}
</style>